<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1">
    <title>查看订票</title>
    <link
            href="./css/layui.css"
            rel="stylesheet">
</head>
<body>
<div style="text-align: center;">
    <div class="layui-inline">
        <table
                style="margin: auto;"
                class="layui-hide"
                id="orderInformation">
        </table>
    </div>
</div>
<script
        type="text/html"
        id="orderInformation-pagebar">
    <div class="layui-btn-container">
        <a class="cray layui-btn layui-btn-xs" href="<%=request.getContextPath()%>/TicketServlet"
           target="mainFrame">
            <i class="layui-icon layui-icon-list"></i>订票
        </a>
    </div>
</script>

<script src="./js/layer/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        // 创建渲染实例
        table
            .render({
                width: '980',
                elem: '#orderInformation',
                url: '/litangtravel/listOrder',
                page: {
                    layout: ['limit', 'count', 'prev', 'page',
                        'next', 'skip'], //自定义分页布局
                    groups: 1,
                    first: false,
                    last: false
                },
                pagebar: '#orderInformation-pagebar', // 分页栏模板
                cols: [[{
                    field: 'ocity',
                    align: 'center',
                    width: 180,
                    title: '出发地'
                }, {
                    field: 'dcity',
                    align: 'center',
                    width: 180,
                    title: '目的地'
                }, {
                    field: 'starttime',
                    align: 'center',
                    width: 180,
                    title: '开始时间',
                    sort: true
                }, {
                    field: 'endtime',
                    align: 'center',
                    title: '结束时间',
                    width: 180,
                    sort: true
                }, {
                    field: 'ordertime',
                    align: 'center',
                    Width: 180,
                    title: '订购时间',
                    sort: true
                }]]
            });
    });
</script>
</body>
</html>